// @import "weatherNav";
.content-box {
    display: flex;
    flex-direction: column;
    color: #fff;
    overflow: hidden;
    .select-city{
        display: flex;
        align-items: center;        
        button{                   
            width: 80px;
            height: 28px;
            border-radius: 4px;
            background-color: rgb(64, 127, 255);  
            color: #fff;
            outline: 0;
            border: 0
          }
          
    }
}
.main-box {
    display: flex;
    .left-box{
        flex: 1;
        display: flex;
        max-width: 460px;
        flex-direction: column;
        overflow: hidden;
        .left-main{
            display: flex;
            flex-direction: column;
            background:none ;
            overflow: hidden;
        }
        .select-city{
            display: flex;
            flex-direction: column;
            .city-box{
                display: flex;
                justify-content: space-between;
                width: 100%;
                margin:10px 0;
            }
            select{
                display: inline-block;
                width: auto;
                vertical-align: middle;
                width:40%;
                height:26px;
                background:rgba(255,255,255,0.2);
                border:1px solid rgba(153,153,153,1);
                border-radius:4px;        
                line-height: 26px;
                font-size: 12px;
                color: #fff;
                background-image: none;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                option{
                    color: #000;
                }
            }
            .input-box{
                position: relative;
                width:100%;
                height:28px;
                background:rgba(255,255,255,0);
                border:1px solid rgba(20,198,202,1);
                border-radius:4px;
                input{
                    width: 100%;
                    height: 100%;
                    background-color: transparent;
                    border: 0;
                    padding: 0 10px;
                    color: #fff;
                }
                button{
                    position: absolute ;
                    right: 10px;
                    top: 50%;
                    width: 40px;
                    transform: translateY(-50%);
                    background: transparent;
                    border: 0;
                    outline: 0;
                }
            }
        }
        .radio-box{
            padding: 20px 0;
            div{
                display: flex;
                justify-content: space-between;
                input{
                    display: none;
                }
                label{
                    width:90px;
                    height:28px;
                    margin-bottom: 8px;
                    background:rgba(255,255,255,0.4);
                    border-radius:4px;
                    color: #fff;
                    line-height: 28px;
                    text-align: center;
                    cursor: pointer;

                }
                input:checked + label {
                    background-color: #14C6CA;
                }
            }
        }
        .passenger-flow{
            flex:1;
            display: flex;
            flex-direction: column;
            background: transparent;
            >div{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-box{
                    flex: 1;
                }
            }
            .radio-list{
                display: flex;
                justify-content: space-around;
                position: relative;
                margin: 0 20px;
                &::before{
                    content: '';
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 12px;
                    z-index: 0;
                    height: 1px;
                    background: #14C6CA;
                }
                input{
                    display: none;
                }
                label{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    i{
                        position: relative;
                        z-index: 2;
                        width:8px;
                        height:8px;
                        margin: 8px 0;
                        background:rgba(255,255,255,1);
                        border-radius:50%;
                    }
                }
                input:checked + label {
                    color: #14C6CA;
                    i{
                        width:16px;
                        height:16px;
                        margin: 4px 0;
                        background:rgba(20,198,202,1);
                    }
                }
            }
        }
    }
    .right-box{
        display: flex;
        flex-direction: column;
        flex: 3;
        justify-content: space-between;
        padding: 0 10px;
        .map-box{
            flex: 1;
            position: relative;
            .map{
                width: 100%;
                height: 100%;
            }
            .map-info{
                position: absolute;
                right: 0;
                top: 0;
                width:360px;
                padding: 15px 10px;
                background:rgba(255,255,255,0.6);
                >div{
                    >div{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        color: #545454;
                        font-size: 14px;
                        padding: 10px 10px 10px 2px;
                        border-bottom: 1px solid #ccc;
                        i{
                            display: flex;
                            align-items: center;
                            img{
                                width: 28px;
                                margin-right: 12px;
                            }
                        }
                    }
                    .active + ul{
                        display: block;
                    }
                    ul{
                        display: none;
                        max-height: 300px;
                        overflow: auto;
                        li{
                            display: flex;
                            padding: 10px;
                            span{
                                width:18px;
                                height:18px;
                                margin-right:12px ;
                                background:rgba(20,198,202,1);
                                border-radius:50%;
                                text-align: center;
                                line-height: 18px;
                                font-size: 14px;
                            }
                            p{
                                flex: 1;
                                color: #545454;
                                font-size: 12px;
                                line-height: 16px;
                            }
                        }
                    }
                }
            }
        }
        .title-box {
            display: flex;
            justify-content: space-between;
            div{
                button{
                    width:80px;
                    height:24px;
                    margin-right: 20px;
                    background:rgba(255,255,255,0.4);
                    border-radius:6px;
                    border: 0;
                    outline: 0;
                    color: #fff;
                    &.congestion-btn{
                        background: #FF0000;
                    }
                    &.amble-btn{
                        background: #F55F00;
                    }
                    &.smooth-btn{
                        background: #2B730E;
                    }
                }
            }
        }
    }
}